<template>
  <div class="form-row" :style="{ height: rowHeight + 'px' }">
    <!-- 左侧标题 -->
    <label class="form-label">{{ label }}</label>

    <!-- 右侧输入框或下拉框 -->
    <div class="form-input">
      <template v-if="type === 'input'">
        <input 
          type="text" 
          :placeholder="placeholder" 
          class="input-field" 
          :style="inputStyles" 
        />
      </template>
      
      <template v-else-if="type === 'select'">
        <select class="select-field" :style="inputStyles">
          <option disabled selected>{{ placeholder }}</option>
          <option v-for="option in options" :key="option">{{ option }}</option>
        </select>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: "FormRow",
  props: {
    label: {
      type: String,
      required: true,
    },
    type: {
      type: String,
      required: true, // 'input' or 'select'
    },
    placeholder: {
      type: String,
      default: "请输入",
    },
    options: {
      type: Array,
      default: () => [],
    },
    rowHeight: {
      type: Number,
      default: 40, // 默认高度为 40px
    },
    inputWidth: {
      type: Number,
      default: 200, // 默认宽度为 200px
    },
    backgroundImage: {
      type: String,
      default: '', // 输入框或下拉框的背景图片
    },
  },
  computed: {
    inputStyles() {
      return {
        width: this.inputWidth + 'px',
        height: this.rowHeight + 'px',
        backgroundImage: `url(${this.backgroundImage})`,
        backgroundSize: '100% 100%',
        backgroundPosition: 'center',
        border: 'none',
        color: '#fff',
        padding: '2px',
        boxSizing: 'border-box',
        backgroundColor: 'transparent', // 设置背景颜色为透明
      };
    },
  },
};
</script>

<style scoped>
.form-row {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 确保左右对齐 */
  margin-bottom: 20px;
}

.form-label {
  width: 150px; /* 固定宽度，确保左侧对齐 */
  color: #ffffff;
  text-align: left;
  font-weight: 600;
}

.form-input {
  width: 100%; /* 让输入部分占据剩余空间 */
}

.input-field,
.select-field {
  width: 100%; /* 确保输入框占满容器宽度 */
  color: white;
  background-size: cover;
  background-position: center;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 4px;
  
}

.input-field::placeholder,
.select-field::placeholder {
  color: #ccc;
}


option {
  background-color: transparent; /* 选项的背景色 */
  color: black; /* 选项的文本颜色 */
  /* padding: 5px;
  font-size: 14px; */
}

</style>
